<template>
  <view class="tab-bar">
    <view class="tab-bar-item" v-for="(item, index) in tabBarList" :key="index" @tap="onChangeTabbar(item, index)">
      <view class="normal">
        <div class="babel" v-if="item.babel">{{item.babel}}</div>
        <image class="icon" :src="tabbarIndex == index ? item.selectedIconPath : item.iconPath"></image>
        <view class="text" :style="{ color: tabbarIndex == index ? selectedColor : color }">{{ item.name }}</view>
      </view>
      <!-- 当点击tab栏的最后一项时，获取用户信息（最后一项一般都是个人中心页） -->
      <!-- #ifdef MP-WEIXIN -->
      <button v-if="index === tabBarList.length - 1" class="userButton" @click="getuserinfoFn"></button>
      <!-- #endif -->
    </view>
  </view>
</template>

<script>
import { handleGetUserInfo } from '@utils/getUserInfo'
export default {
  data() {
    return {
      tabbarIndex: 0
    }
  },
  props: {
    tabBarList: {
      type: Array,
      default () {
        return []
      }
    }
  },
  computed: {
    // tabBarList() {
    //   return this.$store.state.baseStore.tabBarObj.list
    // },
    color() {
      return this.$store.state.baseStore.tabBarObj.color
    },
    selectedColor() {
      return this.$store.state.baseStore.tabBarObj.selectedColor
    }
  },
  methods: {
    onChangeTabbar(item, index) {
      this.tabbarIndex = index
      this.$emit('tabBarItem', item)
    },
    getuserinfoFn() {
      if (JSON.stringify(this.$store.state.baseStore.userInfo) !== '{}') return
      handleGetUserInfo()
    }
  }
}
</script>

<style lang="scss" scoped>
.babel{
  width: 20px;
  height: 20px;
  background: red;
  color: #fff;
  position: absolute;
  border-radius: 50%;
  right: 10px;
  top: 0px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.tab-bar {
  // position: fixed;
  // left: 0;
  // right: 0;
  // bottom: 0;
  width: 100%;
  height: 49px;
  // height: calc(100rpx+ constant(safe-area-inset-bottom)); /*兼容 IOS<11.2*/
  // height: calc(100rpx + env(safe-area-inset-bottom)); /*兼容 IOS>11.2*/
  display: flex;
  justify-content: space-around;
  align-items: center;
  background: #FCFCFC;
  box-shadow: inset 0px 1px 0px 0px #CCCCCC;
}

.tab-bar-item {
  width: 100%;
  height: 100%;
  position: relative;
}

.normal {
  width: 100%;
  height: 100%;
  display: flex;
  position: relative;
  text-align: center;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}
.normal .icon {
  width: 18px;
  height: 18px;
}
.normal .text {
  height: 10px;
  font-size: 10px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #FFAA58;
  line-height: 10px;
  margin-top: 6px;
}

.userButton {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  opacity: 0;
}
</style>
